<template>
    <ul class="mt-5 mx-3">
        <li>
            <div class='el-title' @click="handler">
                <span class="fas fa-map-marker-alt"></span>
                <span class="mx-3">Navigator One</span>
                <img src="./1.png" alt="" width="10" height="10" ref="imgRef">
            </div>
            <transition-group appear tag="ul" ref="listRef" :css="false" @enter="onEnter" @leave="onLeave"
                name="list">
                <li v-for="item in dataList" :key="item.id" v-show="show" class="li-title">{{ item.content }}</li>
            </transition-group>
        </li>
        <li>
            <div class="el-title">
                <span class="fas fa-grip-horizontal"></span>
                <span class="mx-3">Navigator Two</span>
            </div>
        </li>
        <li>
            <div class="el-title is-disabled">
                <span class='fas fa-calendar-alt'></span>
                <span class="mx-3">Navigator Three</span>
            </div>
        </li>
        <li>
            <div class="el-title">
                <span class='fas fa-cog'></span>
                <span class="mx-3">Navigator Four</span>
            </div>
        </li>
    </ul>
</template>

<script setup>
import gsap from 'gsap';

import { nanoid } from 'nanoid';
import { ref } from 'vue';

const imgRef = ref(null)

const listRef = ref(null)
const show = ref(false)

const dataList = ref([
    {
        id: nanoid(5),
        content: 'item one',
    },
    {
        id: nanoid(5),
        content: 'item two',
    },
    {
        id: nanoid(5),
        content: 'item three',
    },
    {
        id: nanoid(5),
        content: 'item four',
    },
])

const handler = e => {
    show.value = !show.value
    // imgRef.value[0].classList.toggle('img-rotate')
    if (show.value) {
        gsap.fromTo(imgRef.value, { rotateZ: 0 }, { rotateZ: 180 })
    } else {
        gsap.fromTo(imgRef.value, { rotateZ: 180 }, { rotateZ: 0 })
    }
}

const onEnter = (el, done) => {
    gsap.fromTo(el, {
        height: 0,
    },
        {
            height: 'auto',
            duration: 1,
            ease: 'linear',
            onComplete: done,
        })
}
const onLeave = (el, done) => {
    gsap.to(el,
        {
            duration: 1,
            ease: 'linear',
            height: 0,
            onComplete: done,
            display:'none'
        })
}

</script>

<style lang="scss" scoped>
.el-title {
    width: 250px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
}
.el-title:hover {
    background-color: rgb(236, 245, 255);
}

ul {
    list-style: none;
    
}
.li-title{
    width: 200px;
    overflow: hidden;
}
.li-title:hover{
    cursor: pointer;
    background-color: rgb(236, 245, 255);
}
li {
    cursor: pointer;
}
.is-disabled {
    opacity: .25;
    cursor: not-allowed;
    background: none !important;
    transform: rotate()
}
</style>